import React , { Component } from 'react'

import SelectContainer from './SelectStyleComp'

//定义无状态组件
const Item = props =>{
    return (
        <li>
            <a>
                <img src={props.pic_url}/>
            </a>
        </li>
    )
}

class Selector extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            select:[
                   { 
                        id:1,
                        pic_url:'https://goods4.juancdn.com/jas/181119/7/6/5bf2524bb6f8ea534d206f83_270x241.png?imageMogr2/quality/85!/format/png',
                        text:'最后疯抢'
                    },
                    { 
                        id:2,
                        pic_url:'https://goods8.juancdn.com/jas/181228/f/e/5c25bd0d33b08962a220f3a6_270x241.png?imageMogr2/quality/85!/format/png',
                        text:'限时秒杀'
                    },
                    { 
                        id:3,
                        pic_url:'https://goods2.juancdn.com/jas/180201/3/d/5a727415a9fcf8280d24465a_270x241.png?imageMogr2/quality/85!/format/png',
                        text:'品牌特卖'
                    },
                    { 
                        id:4,
                        pic_url:'https://goods4.juancdn.com/jas/180917/6/5/5b9f175033b08945a870ad21_270x241.png?imageMogr2/quality/85!/format/png',
                        text:'生活超市'
                                
                    },
                ]
            
         }
    }

    //定义渲染函数
    renderItem(){
        return this.state.select.map(item => <Item key = { item.id } { ...item }/>)
    }
    render() { 
        return ( 
            <SelectContainer>
                <ul>
                   {this.renderItem()}
                </ul>
            </SelectContainer>
         );
    }
}
 
export default Selector;